<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-dialog
    v-model="props.toggle"
    :title="dialogtitle"
    :before-close="handleClose"
    :open="openDialog"
  >
    <el-table
      :data="tableData"
      :header-cell-style="{ color: '#000' }"
      :cell-style="{ color: '#000' }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column property="date" label="缴费时间" width="150" />
      <el-table-column property="name" label="住户姓名" width="150" />
      <el-table-column property="address" label="住户地址" width="200" />
      <el-table-column property="money" label="缴费金额" width="150" />
      <el-table-column prop="tag" label="状态" width="120">
        <template #default="scope">
          <el-tag
            :type="scope.row.tag === '未缴费' ? 'error' : 'success'"
            disable-transitions
            >{{ scope.row.tag }}</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, watch } from "vue";

const props = defineProps({
  toggle: Boolean,
  tableData: Array,
  rowId: String,
  dialogtitle: String,
});

const emit = defineEmits(["closeDialog"]);

// 关闭dialog之前
const handleClose = () => {
  emit("closeDialog");
};
watch(props.toggle, (newValue) => {
  this.dialogVisible = newValue;
});

// 打开dialog
const tableRowClassName = ({ row, rowIndex }) => {
  console.log(props.rowId, "tableRowClassName");
  if (props.rowId === row.id) {
    return "success-row"; //这是类名
  } else {
    return "";
  }
};
const openDialog = () => {
  console.log(props.rowId, "rowid");
  tableRowClassName();
};

// 点击选中行变色
</script>

<style lang="scss" scoped>
.el-table th {
  color: #000 !important; /* 字体颜色 */
  font-size: 16px;
  border: 0;
  height: 30px;
  line-height: 30px;
}
.el-table tr,
.el-table td {
  color: #000 !important;
  font-size: 12px;
  border: 0;
  height: 30px;
  line-height: 30px;
}
/* 上面两个背景色透明才能让table的背景透明少一个都不行 */

:deep(.el-table__body .success-row) {
  background-color: rgb(218, 218, 218) !important;
}
</style>
